<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加商品</title>

    <link href="${ctx}/dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link href="${ctx}/dist/layer-v3.1.1/layer.css"/>

</head>
<body>
    <div>
       <form>
           <table>
               <tr>
                   <td class="col-sm-2">商品名称：</td>
                   <td class="col-sm-5"><input type="text" name="name"/></td>
                   <td class="col-sm-5"></td>
               </tr>
               <tr>
                    <td class="col-sm-2">商品分类：</td>
                    <td class="col-sm-5">
                        <select name="classification" class="form-control">
                            <option value="新鲜水果">新鲜水果</option>
                            <option value="海鲜水产">海鲜水产</option>
                            <option value="精选肉类">精选肉类</option>
                            <option value="冷饮冻食">冷饮冻食</option>
                            <option value="蔬菜蛋类">蔬菜蛋类</option>
                        </select>
                    </td>
                    <td class="col-sm-5"></td>
                </tr>
                <tr>
                    <td class="col-sm-2">单价：</td>
                    <td class="col-sm-5"><input type="text" name="price"/></td>
                    <td class="col-sm-5"></td>
                </tr>
                <tr>
                    <td class="col-sm-2">规格：</td>
                    <td class="col-sm-5"><input type="text" name="unit"/></td>
                    <td class="col-sm-5"></td>
                </tr>
                <tr>
                    <td class="col-sm-2">产地：</td>
                    <td class="col-sm-5"><input type="text" name="origin"/></td>
                    <td class="col-sm-5"></td>
                </tr>
                <tr>
                    <td class="col-sm-2">介绍：</td>
                    <td class="col-sm-5"><input type="text" name="introduce"/></td>
                    <td class="col-sm-5"></td>
                </tr>
                <tr>
                    <td class="col-sm-2">备注：</td>
                    <td class="col-sm-5"><input type="text" name="remark"/></td>
                    <td class="col-sm-5"></td>
                </tr>              
           </table>
            <input style="margin-top:20px;margin-left:80px;" type="submit" value="添加商品" onclick="addgoods()"/>
            
       </form>
    </div>
</body>
<script src="${ctx}/dist/jquery/jquery.min.js"></script>
<script src="${ctx}/dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${ctx}/dist/jquery.validate/jquery.validate.min.js"></script>
<script src="${ctx}/dist/jquery.validate/messages_zh.min.js"></script>

<script type="text/javascript">
	function addgoods(){
		var data=$('form').serialize();
		$.get('${ctx}/GoodsServlet/addGoods',data,function(data){
			if(data){
				parent.layer.msg('添加成功');
				var index=parent.layer.getFrameIndex(window.name);
				parent.layer.close(index);
			}else{
				layer.msg('添加失败');
			}
		});
	}

	//表单验证
	$('form').validate({
        rules:{
            name:"required",
            price:{
                required:true,
                number:true,
            },
            unit:{
                required:true,            
            },
            origin:"required",
        },
        messages:{
            name:"请输入商品名！",
            price:{
                required:"请输入商品价格！",
                number:"请输入数字！",
            },
            unit:{
                required:"请输入商品规格！",            
            },
            origin:"请输入产地！",
        }
    });
</script>
</html>